<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直margin合并</title>
     <style>
         .box{
            width: 800px;
            height: 180px;
            /*border: 1px solid #000;*/
            margin: 50px auto;
         }
         .box div{
            width: 800px;
            height: 40px;
            border: 1px solid #000;
            margin-top: 50px;
         }
     </style>
</head>
<body>
    <div class="box">
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
        <div>外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。</div>
    </div>
</body>
</html>